<template>
  <view class="profile-container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" src="/static/avatar.jpg"></image>
        <view class="user-meta">
          <text class="username">画船听雨眠</text>
          <text class="user-id">小红书号：1548083658</text>
          <text class="edit-profile">点击这里，填写简介</text>
        </view>
      </view>
      
      <view class="stats">
        <view class="stat-item">
          <text class="stat-number">34</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">0</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">0</text>
          <text class="stat-label">获赞与收藏</text>
        </view>
        <button class="edit-btn">编辑资料</button>
      </view>
    </view>
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
   
  
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
    <!-- 内容区 -->
    <view class="Mysection">
      <view class="menu-item" @click="getmynote()">
        <!-- <uni-icons type="compose" size="20" color="#666"></uni-icons> -->
        <text>笔记</text>
      </view>
      <view class="menu-item" @click="tocollection()">
        <!-- <uni-icons type="star" size="20" color="#666"></uni-icons> -->
        <text>收藏</text>
      </view>
      <view class="menu-item" @click="tolike()">
        <!-- <uni-icons type="heart" size="20" color="#666"></uni-icons> -->
        <text>赞过</text>
      </view>
    </view>
	<view class="recommend-grid">
	  <view 
	    class="recommend-item" 
	    v-for="(item, index) in recommendList" 
	    :key="index"
	    @click="handleRecommendClick(item)"
	  >
	    <!-- 图片 -->
	    <image 
	      class="item-image" 
	      :src="item.image" 
	      mode="aspectFill"
	    ></image>
	    
	    <!-- 内容区域 -->
	    <view class="item-content">
	      <text class="item-title">{{item.title}}</text>
	      <view class="item-footer">
	        <!-- 作者信息（添加头像） -->
	        <view class="author-info">
	          <image 
	            class="author-avatar" 
	            :src="item.avatar" 
	            mode="aspectFill"
	          ></image>
	          <text class="item-author">{{item.author}}</text>
	        </view>
	        
	        <!-- 点赞区域 -->
	        <view class="like-container" @click.stop="toggleLike(item)">
	          <image 
	            class="like-icon" 
	            :src="item.liked ? '/static/liked.png' : '/static/like.png'"
	          ></image>
	          <text class="like-count">{{formatLikeCount(item.likeCount)}}</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
    <!-- 发布引导 -->
    <view class="publish-prompt">
      <text class="prompt-text">晒晒你相册里的花裙照</text>
      <button class="publish-btn">去发布</button>
    </view>
  </view>
  <!-- 底部导航栏 -->
  <view class="tab-bar">
    <view class="tab-item" @click="switchTab('home')">
      <image class="tab-icon" :src="currentTab === 'home' ? '/static/home-active.png' : '/static/home.png'"></image>
      <text :class="currentTab === 'home' ? 'tab-text-active' : 'tab-text'">首页</text>
    </view>
    <view class="tab-item" @click="switchTab('AIchat')">
      <image class="tab-icon" :src="currentTab === 'AI' ? '/static/AI-active.png' : '/static/AI.png'"></image>
      <text :class="currentTab === 'AI' ? 'tab-text-active' : 'tab-text'">AI解答</text>
    </view>
    <view class="tab-item" @click="switchTab('mine')">
      <image class="tab-icon" :src="currentTab === 'mine' ? '/static/mine-active.png' : '/static/mine.png'"></image>
      <text :class="currentTab === 'mine' ? 'tab-text-active' : 'tab-text'">我的</text>
    </view>
  </view>
</template>
<script>
	export default{
		data(){
			return{
				currentTab: 'mine',
				recommendList: [
				        {
				          id: 1,
				          image: '/static/shouye1.png',
				          title: '上班试试不一样的风格，',
				          author: '柴分甜',
				          avatar: '/static/shouye1.png',
				          likeCount: 1560,
				          liked: false
				        },
				        {
				          id: 2,
				          image: '/static/shouye1.png',
				          title: '这感觉……只有女生才',
				          author: '七七早安Iris',
				          avatar: '/static/shouye1.png',
				          likeCount: 48000,
				          liked: true
				        },
				        {
				          id: 3,
				          image: '/static/shouye1.png',
				          title: '打卡公基常识了！！！',
				          author: '公基常识',
				          avatar: '/static/shouye1.png',
				          likeCount: 118,
				          liked: false
				        },
				        {
				          id: 4,
				          image: '/static/shouye1.png',
				          title: '郵都的正确读音？',
				          author: '胖兔兔',
				          avatar: '/static/avatar4.jpg',
				          likeCount: 427,
				          liked: false
				        },
						   {
						     id: 5,
						     image: '/static/shouye1.png',
						     title: '郵都的正确读音？',
						     author: '胖兔兔',
						     avatar: '/static/avatar4.jpg',
						     likeCount: 427,
						     liked: false
						   },
						   {
						     id: 6,
						     image: '/static/shouye1.png',
						     title: '郵都的正确读音？',
						     author: '胖兔兔',
						     avatar: '/static/avatar4.jpg',
						     likeCount: 427,
						     liked: false
						   }
				      ]
			}
		},
		methods:{
			// 切换tab
			switchTab(tab) {
			  this.currentTab = tab;
			  if (tab === 'home') {
			   uni.navigateTo({
			   	url:'/pages/shequ/shequ'
			   })
			  } else if (tab === 'mine') {
			   
			  }
			  else if (tab === 'AIchat') {
			    uni.navigateTo({
			      url: '/pages/AIchat/AIchat'
			    });
			  }
			},
			handleRecommendClick(item) {
				//传参noteid
			   uni.navigateTo({
			   	url:'/pages/comment/comment'
			   })
			   },
					 toggleLike(item) {
					      item.liked = !item.liked
					      if (item.liked) {
					        item.likeCount++
					      } else {
					        item.likeCount--
					      }
					    },
					    formatLikeCount(count) {
					      if (count >= 10000) {
					        return (count / 10000).toFixed(1) + '万'
					      }
					      return count
					    },
			tocollection(){
				//getdifferent的content
				// uni.navigateTo({
				// 	url:'/pages/three/collection/collection'
				// })
			},
			tonote(){
				// uni.navigateTo({
				// 	url:'/pages/three/writedown/writedown'
				// })
			},
			tolike(){
				// uni.navigateTo({
				// 	url:'/pages/three/liked/liked'
				// })
			},
			getmynote(){
				uni.request({
					url:"http://127.0.0.1:8086/note/selusernote",
					method:'GET',
					data:{
						userid:'1',
					},
					success: (res) => {
						console.log("res.data: " + JSON.stringify(res.data));
					}
				})
			}
			
		}
	}
</script>
<style lang="scss">
.profile-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.user-header {
  background-color: #fff;
  padding: 20px 15px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
  border: 1px solid #f0f0f0;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-id, .edit-profile {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.edit-btn {
  background-color: #fff;
  border: 1px solid #ff2442;
  color: #ff2442;
  font-size: 14px;
  padding: 5px 15px;
  border-radius: 15px;
  margin-left: 15px;
}

.divider {
  height: 10px;
  background-color: #f5f5f5;
}

.Mysection {
  background-color: #fff;
  padding: 0 15px;
  display: flex;
}

.Mysection-title {
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  text {
    margin-left: 10px;
    font-size: 16px;
  }
}

.publish-prompt {
  background-color: #fff;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prompt-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.publish-btn {
  background-color: #ff2442;
  color: #fff;
  width: 120px;
  border-radius: 20px;
  font-size: 14px;
}
.recommend-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}

/* 推荐项样式 */
.recommend-item {
  width: 48%;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 图片样式 */
.item-image {
  width: 100%;
  height: 200px;
}

/* 内容区域样式 */
.item-content {
  padding: 8px;
}

.item-title {
  font-size: 14px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  line-height: 1.4;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 作者信息样式 */
.author-info {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 5px;
}

.item-author {
  font-size: 12px;
  color: #999;
}

/* 点赞区域样式 */
.like-container {
  display: flex;
  align-items: center;
}

.like-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}

.like-count {
  font-size: 12px;
  color: #999;
}

/* 底部导航栏样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #f1f1f1;
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.tab-center {
  position: relative;
}

.tab-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5rpx;
}

.tab-icon-center {
  width: 80rpx;
  height: 60rpx;
  position: absolute;
  top: -30rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #999;
}

.tab-text-active {
  font-size: 24rpx;
  color: #007AFF;
}
</style>